<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <input type="text" name="username" placeholder="请输入用户名" id="username">
    <!-- 存放提示信息 -->
    <span id="usernameSpan"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"> <br>
    <button>提交</button>
</form>
<!--  导入axios类库  -->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    /*
        说明：
            1.后台地址url："http://localhost:8080/registerServlet"
            2.后台需要根据key即参数名是username来获取前端提交的用户名数据
            3.后台已经存在的用户名是："岩岩"
     */
    //1.给用户名输入框标签绑定离焦事件onblur
    document.getElementById("username").onblur=function(){
         //2.在离焦事件的匿名函数体中获取用户名输入框的值
         let usernameValue = document.getElementById("username").value;
         //3.向后台服务器发送ajax异步请求，携带获取的用户名的值，用户名的值作为请求参数 name=value
         //username="岩岩" 这里等号左边必须是username,因为后台就是根据username获取等号右边的值岩岩
        //  axios.post("http://localhost:8080/registerServlet",`username=${usernameValue}`)
         axios.post("http://localhost:8080/registerServlet","username="+usernameValue)
              .then(resp=>{
                //TODO:resp.data后台服务器响应的数据，
                //如果输入的用户名存在resp.data的值是false(不可以注册),如果输入的用户名不存在，resp.data的值是true(可以注册)
                //console.log(resp.data);
                 //4.处理后台服务器的响应，显示提示信息给用户看
                 if(resp.data){
                    //resp.data的值是true(可以注册)
                    //给 <span id="usernameSpan"></span>标签设置文本
                    //element.innerHTML	设置或返回元素的内容。就是操作标签文本的
                    document.getElementById("usernameSpan").innerHTML="√恭喜，该用户可以注册";//<span id="usernameSpan">√恭喜，该用户可以注册</span>
                    //设置span标签的文本是绿色
                    document.getElementById("usernameSpan").style.color="green";
                }else{
                    //resp.data的值是false(不可以注册)
                    document.getElementById("usernameSpan").innerHTML="亲，对不起，用户名已经存在，不可以注册";
                    document.getElementById("usernameSpan").style.color="red";
                 }
              });
    }
   
    
   

</script>
</body>

</html>